<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
 .colorblue{color:blue}
 .colorred{color: red;}
</style>
<body>
    <div id="vm">
        <!-- v-bind绑定属性 缩写形式 ：-->
        <a v-bind:href="url">{{link}}</a>
        <!-- v-html指定某个插值需要进行HTML渲染 -->
        <!--  v-once只能首次被渲染，后续插值在被更改不会再去被渲染 -->
       <div v-html='msg'>{{msg}}</div>
       <hr>
       <div>{{ info ? info : '默认值'}}</div>
       <div>{{ num1+num2 }}</div>
       <a :href="'/article/'+article.id">{{article.title}}</a>
    <hr>
 
    <!-- v-on事件绑定缩写形式@ -->
    <button @click="show">show按钮</button>
    <div @click='cldiv'>
        <!-- .stop事件修饰符 -->
        <button @click.stop="clbtn">btn按钮</button>
    </div>
    <div :class="isError?'colorred':'colorblue'">蓝色测试文本</div>
   <div :style="{backgroundColr:bgRed,fontSize:fontSize+'px'}"></div>
<hr>
<ul>
    <li v-for="item in items":key="item">{{item}}</li>
</ul>
<hr>
<!-- v-if基于dom操作  如果不显示就直接从dom删除 -->
<div v-if="!isLogin">请登录</div>
<div v-else>admin,退出</div>
<!-- v-if基于dom操作  如果不显示就直接从dom删除 -->
<div>-------------</div>
<div v-if="isLogin">请登录</div>
<!-- v-show基于样式操作，如果不显示就设置display:none -->
<div v-show="isLogin">v-show</div>
</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
    </script>
<script>
    let vu=new Vue({
        el:'#vm',//挂载点设置
        //插值
       
        data:{
            link:'vue.js',
            url:'http://cn.vuejs.org/',
            msg:'<h1>标题</h1>',
            info:'',
            num1:1,
            num2:2,
            article:{
                id:1,
                title:'标题1'
            },
            isError:true,
            bgRed:'red',
            fontSize:'50',
            items:['item1','item2','item3','item4'],
            isLogin:true,
        },
        
        methods: {
             show:function(){
                 console.log('this.article.title')
             },
             cldiv(){
                console.log('div被调用')
             },
             clbtn(){
                 this.item.pop()
                console.log('btn被调用')
             }
         },
    })
</script>
</body>

</html>